<template>
	<div class="tabctitem">
		<div class="m-homeremd">
			<h2 class="remd_tl">推荐歌单</h2>
			<div class="remd_songs">
				<div class="remd_ul" v-for="(item,index) in recommendList" v-if="index<6" :key="item.id" @click="jump(item.id)">
				<div class="remd_img">
						<img class="u-img" v-lazy="item.picUrl">
					</div>
					<span class="u-earp remd_lnum">{{item.trackCount}}万</span>
					<i class="remd_high" v-if="item.canDislike==true"></i>
					<p class="remd_text">{{item.name}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			recommendList: [Array,Object,String]
		},
		methods:{
		jump(id){
			this.$router.push({
	  			path:`/introduce/${id}`, 
			})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	
	.tabctitem {
		width: 100%;
		height: 100%;
		margin-top: r(208px);
		.m-homeremd {
			padding-top: r(40px);
			.remd_tl {
				position: relative;
				padding-left: r(18px);
				margin-bottom: r(28px);
				font-size: r(34px);
				height: r(40px);
				line-height: r(40px);
				font-weight: 400;
			}
			.remd_tl::after {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: r(-18px);
				width: r(4px);
				height: r(32px);
				background-color: #d33a31;
			}
			.remd_songs {
				padding-bottom: r(48px);
				height: 0;
				display: flex;
				flex-wrap: wrap; // 子元素将沿着交叉轴正向排列在多行中
				justify-content: space-between;
				overflow: hidden;
				padding-bottom: 100%;
				.remd_ul {
					position: relative;
					overflow: hidden;
					float: left;
					width: 32.5%;
					margin-bottom: r(28px);
					height: 0;
					padding-bottom: 45.5%;
					.remd_img {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: r(72px);
						>img {
							width: 100%;
							height: 100%;
							overflow-y: hidden;
						}
					}
					.remd_img::after {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 20px;
						z-index: 2;
						background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .2)), to(transparent));
						background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2), transparent);
						background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent);
					}
					.remd_lnum {
						position: absolute;
						right: r(10px);
						top: r(4px);
						z-index: 4;
						padding-left: r(26px);
						color: #fff;
						font-size: r(24px);
						background-position: 0;
						background-repeat: no-repeat;
						background-size: r(22px) r(20px);
						text-shadow: r(2px) 0 0 rgba(0, 0, 0, .15);
					}
					.u-earp {
						background-image: url();
					}
					.remd_high {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 5;
						width: r(40px);
						height: r(40px);
						background: url() 0 no-repeat;
						background-size: contain;
					}
					.remd_text {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: r(72px);
						padding: r(12px) r(4px) 0 r(12px);
						line-height: 1.2;
						font-size: r(26px);
					}
				}
			}
		}
	}
</style>